<template>
  <div class="agent frame_content m10" style="margin-bottom: 40px">
    <div style="text-align:center">
      <a href="javascript:void(0);" @click="Addone()">添加</a>
    </div>
    <table class="common cent agentTable">
      <thead>
        <tr>
          <th>房间号码</th>
          <th>房间账号</th>
          <th>房间人数</th>
          <th>客服qq</th>
          <th>微信客服</th>
          <th>房间总盈亏</th>
          <th>房间总余分</th>
          <th>微信收款账号</th>
          <th>微信收款二维码</th>
          <th>支付宝收款账号</th>
          <th>支付宝收款二维码</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        
        <tr v-for="(item,index) in items" :key="index">
          <td>{{item.room_num}}</td>
          <td>{{item.account_name}}</td>
          <td>{{item.account_number}}</td>
          <td>{{item.qq_service}}</td>
          <td>{{item.wx_service}}</td>
          <td>{{item.profit}}</td>
          <td>{{item.balance}}</td>
          <td>{{item.wx_receipt}}</td>
          <td>
             <img style="width:20px;height:20px" class="wxImg" :src="'api'+item.wx_code"/>
          </td>
          <td>{{item.alipay_receipt}}</td>
          <td>
             <img style="width:20px;height:20px" class="zfbImg" :src="'api'+item.alipay_code"/>
          </td>
          <td>状态:{{item.status == 0 ? "禁用" : "启用"}}
            |
            <a @click="Delete(item.account_id,index)">删除</a>
            <i></i>
            |
            <a href="javascript:void(0);" @click="revision(item.account_id,item.account_name,item.qq_service,item.wx_service,item.wx_receipt,item.wx_code,item.alipay_receipt,item.alipay_code,item.status)">修改</a>
          </td>
        </tr>
      </tbody>
    </table>


    <div v-if="show">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          @current-change="currChange"
          layout="prev, pager, next"
          :page-size="per_page"
          :total="total">
        </el-pagination>
      </div>
    <!-- 添加数据 -->
    <div ref="mode6" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加数据1</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>房间账号</td>
                    <td>
                      <input type="text" v-model="addid" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="Addpaw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间号码</td>
                    <td>
                      <input type="text" v-model="addroom" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                      <div class="block">
                        <el-date-picker
                          v-model="proxy_value"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="timestamp">
                        </el-date-picker>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater()"
                        class="btn sendBtn"
                      >提交保存1</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode6" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 添加会员 -->
    <div ref="mode7" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加会员</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td>
                      <input type="text" v-model="addid" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="Addpaw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间号</td>
                    <td>
                      <input type="text" v-model="addroom" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                      <div class="block">
                        <el-date-picker
                          v-model="value2"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="timestamp">
                        </el-date-picker>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater(lists.account_id)"
                        class="btn sendBtn"
                      >提交保存M</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode7" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 修改 -->
    <div ref="mode3" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >修改</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>房间账号id</td>
                    <td>
                      <input type="text" v-model="account_name"  readonly="readonly" />
                    </td>
                    <td>qq客服</td>
                    <td>
                      <input type="text" v-model="qq_service"  />
                    </td>
                  </tr>
                  <tr>
                    <td>微信客服</td>
                    <td>
                      <input type="text" v-model="wx_service" />
                    </td>
                    <td style="width:80px">微信收款账号</td>
                    <td>
                      <input type="text" v-model="wx_receipt" />
                    </td>
                  </tr>
                  <tr>
                    <td>支付宝收款账号</td>
                    <td>
                      <input type="text" v-model="alipay_receipt"  />
                    </td>
                    <td>状态</td>
                    <td>
                      <input type="radio" v-model="on"  value="1" />启用
                      <i></i>
                      |
                      <input type="radio" v-model="on"  value="0" />禁用
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">点击图片修改微信收款码</td>
                    <td>
                        <el-upload
                          class="avatar-uploader"
                          :action="'api/login/room_admin/upload/token/'+token"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="wx_code" :src="'/api'+wx_code" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                  </el-upload>
                    </td>
                    <td style="width:80px">点击图片修改支付宝收款码</td>
                    <td>
                        <el-upload
                          class="avatar-uploader"
                          :action="'api/login/room_admin/upload/token/'+token"
                          :show-file-list="false"
                          :on-success="alipay"
                          :before-upload="alipayUpload">
                    <img v-if="alipay_code" :src="'/api'+alipay_code" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                  </el-upload>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="regulation()"
                        class="btn sendBtn"
                      >提交保存L</a>
                    </td>
                  </tr>
                  <!-- <tr>
                    <td>禁用彩种</td>
                    <td colspan="3">
                      <a style="color:white;text-decoration:none;margin:5px"
                        v-for="(list,account) in colors" :key="account"
                        @click="chagecolor(account,list.project_name)"
                        :class="[
                          'btn',
                          { btndanger: list.status == 2, 'btn-success': list.status == 1 }
                        ]"
                        >{{ list.lottert_name}}<span>{{ list.status == 1 ? '关闭' : '开启' }}</span></a
                      >
                    </td>
                  </tr> -->
                </tbody>
                
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode3" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import http from "@/utils/http";
import { Toast } from "vant";
import { isArray } from 'util';
export default {
  data() {
    return {
      token:"",
      danger: "btndanger",
      only:"",//登录账号的ID
      pro: "",
      inputVal: "",
      accountId: "",
      proxy_value:"",//代理
      value2:"",
      addid:"",
      Addpaw:"",
      addroom:"",
      login:"",
      paw:"",
      colors:[],
      items:[],
      show:false,
      total:0,//一共有多上条数据
      per_page:1,//一页显示多少条数据
      curPage:1,
      details:[],//点击详情数据
      btnlists:[],//彩种id
      account_id:"",
      account_name:"",
      qq_service:"",
      wx_service:"",
      wx_receipt:"",
      wx_code:"",//微信二维码
      alipay_receipt:"",
      alipay_code:"",
      on:'',
    };
  },
  computed: {
    ...mapState("agent", ["agentList", "offlineList"])
  },
  watch:{
    colors(n, o){
      console.log(n, o)
    }
  },
  methods: {
    ...mapActions("agent", ["getAgentList"]),
    // 添加代理
    Add(item){
      let mode6 = this.$refs.mode6;
      mode6.style.display = "block";
      this.pro = item;
    },
    // 关闭添加弹窗
    closemode6() {
      let mode6 = this.$refs.mode6;
      mode6.style.display = "none";
    },
    //添加会员
    member(item){
      let mode7 = this.$refs.mode7;
      mode7.style.display = "block";
      this.pro = item;
    },
    //关闭添加会员
    closemode7(){
      let mode7 = this.$refs.mode7;
      mode7.style.display = "none";
    },

    //打开修改弹窗
    revision(a,b,c,d,e,f,g,h,i) {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "block";
      this.account_id=a;
      this.account_name=b
      this.qq_service=c;
      this.wx_service=d;
      this.wx_receipt=e;
      this.wx_code=f;
      this.alipay_receipt=g;
      this.alipay_code=h;
      this.on=i;
    },
    // 关闭修改弹窗页面
    closemode3() {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "none";
    },
    //获取列表数据
    proxy_list(){
      let token=sessionStorage.getItem('token');
      http
        .post(
          `/api/login/agent/agent_room?token=${token}`,
        )
        .then(response => {
          // console.log(response,'response++++++++++++++++++++++++++++++++++++++++++++')
          this.items=response.data.res;
        });
    },
    //提交添加数据保存
    changeBackWater(){
      let token=sessionStorage.getItem('token');
      let agent_account_id=this.only;
      let account_name=this.addid;
      let password=this.Addpaw;
      let expire_time=this.proxy_value/1000;
      let room_num=this.addroom;
      http
        .post(
          `/api/login/room_admin/add?token=${token}&agent_account_id=${agent_account_id}&account_name=${account_name}&password=${password}&expire_time=${expire_time}&room_num=${room_num}`,
        )
        .then(response => {
          if(response.data.status===true){
            this.closemode6();
            this.proxy_list();
            this.addid="";
            this.Addpaw="";
            this.proxy_value="";
            this.addroom="";
          }else{
            console.log('添加失败!')
          }
        });
    },
    Delete(a,index){
      let that=this;
      let token=sessionStorage.getItem('token');
      let account_id=a;
      // console.log(index,'index')
       http
        .post(
          `/api/login/agent/room_delet?token=${token}&account_id=${account_id}`,
        )
        .then(response => {
          console.log(response,'response+++')
          if(response.data.status===true){
            console.log(that.items,'items')
            that.items.splice(index,1)
          }else{
            console.log('删除失败！')
          }
          
        });
    },
    //页码切换
    currChange(val){
      console.log(`当前页:${val}`);
      this.curPage = val;
      this.proxy_list()
    },
    //提交修改
    regulation(){
      let token=sessionStorage.getItem('token');
      let data={};
      data.account_id=this.account_id;
      data.qq_service=this.qq_service;
      data.wx_service=this.wx_service;
      data.wx_receipt=this.wx_receipt;
      data.wx_code=this.wx_code;
      data.status=this.on;
      data.alipay_receipt=this.alipay_receipt;
      data.alipay_code=this.alipay_code;
        http
          .post(
            `/api/login/agent/myroom_edit?token=${token}`,data
            )
          .then(response =>{
            console.log(response,'+++++++++++response+++++++++');
            if(response.data.status===true){
              this.closemode3()
              this.proxy_list()
            }else{
              console.log('提交失败')
            }
          })
    },
    chagecolor(index,e) {//彩种切换
    let token=sessionStorage.getItem('token')
    let status = this.colors[index].status;
    let account_id=this.id;
    let project_name=e;
      if (status == 1) {
        status=2;
      } else {
        status=1;
      }
      console.log(status,'statu')
      http
        .post(
          `/api/login/agent/delete?token=${token}&account_id=${account_id}&status=${status}&project_name=${project_name}`
        )
        .then(response => {
          this.colors[index].status = status
        });
    },
    //添加弹窗
    Addone(){
      let mode6 = this.$refs.mode6;
      mode6.style.display = "block";
      
    },
    //上传微信图片
      handleAvatarSuccess(res,file) {
        console.log(res,'res')
        this.wx_code= res.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //上传支付宝图片 alipay  alipayUpload
      alipay(res,file) {
        console.log(res,'res')
        this.alipay_code= res.url;
      },
      alipayUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      } 
  },



  created() {
    this.getAgentList();
    this.proxy_list();//一进来的调用接口
    let account=JSON.parse(localStorage.getItem('account'));
    this.only=account.id;
    let token=sessionStorage.getItem('token');
    this.token=token;
    // console.log(token);
  }
};
</script>

<style>
.el-input{
  left: 10px !important;
}
.el-input__inner{
 height:25px !important;
 width: 180px !important;
}
.el-input__icon{
  position: relative;
  bottom: 7px;
}
table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.agent a {
  color: #08c;
  text-decoration: none;
}
.agent a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}
.agentTable img {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.layerModel .wrap {
  box-sizing: border-box;
  height: 100%;
  border-top: none;
  overflow-y: auto;
  padding: 10px;
}
#model1 .sendBtn,
#model3 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#model1 .sendBtn:hover,
#model3 .cancelBtn:hover {
  text-decoration: none;
}
a:hover,
a:active {
  outline: 0;
}
#model2 .addBtn {
  width: 40px;
  height: 22px;
  border: 1px solid #9b9b9b;
  background-color: #e1e1e1;
  text-align: center;
  line-height: 22px;
  color: #333;
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  vertical-align: super;
}
#model2 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
}
#model2 a {
  text-decoration: none;
}
.btn-success {
  color: rgb(255, 255, 255);
  text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px;
  background-color: rgb(91, 183, 91);
  background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btndanger {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #bd362f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ee5f5b),
    to(#bd362f)
  );
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
</style>
